<html>
<head>
<style>
@page {
  size: 200px 400px;
  margin: 0;
}
body {
  max-width: 200px;
  margin: 0;
}
div {
  margin: 10px 7px;
  border: 1px solid black;
  height: 30px;
}
#one {
  background-image: linear-gradient(to left, red, blue);
}
#two {
  background-image: linear-gradient(to right, green, blue, red, orange);
}
#three {
  background-image: linear-gradient(to bottom, #00f, #f00);
}
#four {
  background-image: linear-gradient(45deg, red, blue);
}
#five {
  background-image: linear-gradient(to left, orange 0%, blue 100%);
}
#six {
  background-image: linear-gradient(to right, blue, orange 40px, black 100px, green);
}
#seven {
  background-image: linear-gradient(to right, green, red 20px, blue, orange 60px, black);
}
#eight {
  height: 60px;
  padding: 10px;
  background-image: linear-gradient(to top, green, red 20%, blue);
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</body>
</html>
